<!--
 * @Descripttion: 财政-财政拨款-列表
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-06-03 14:02:12
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-09-22 11:29:04
-->
<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              :height="250"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="行业" class="row-padding-bottom">
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in industryOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" class="row-padding-bottom">
            <el-select
              v-model="filterField.status"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button>
          </el-form-item>
          <el-form-item>
            <exportBtn
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_CZBM_FINANCIAL"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="projectName"
            label="项目名称"
          ></el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="区域"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="pcName"
            label="建设方"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="pbName"
            label="施工方"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="工程造价(万元)"
            align="center"
            :formatter="dateForma"
          ></el-table-column>
          <el-table-column
            prop="statusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="investmentDesc"
            label="投资类型"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="grantAll"
            label="财政拨款(万元)"
            align="center"
            :formatter="dateForma"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            min-width="90"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-if="isShowDetail"
                @click="toFinancialBtn(scope.row)"
                >财政拨款</el-link
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- 财政拨款弹框展示 -->
      <el-dialog
        title="财政拨款"
        :visible.sync="accountFormVisible"
        :close-on-click-modal="false"
        custom-class="brand-dialog-min-width"
        class="financialVisible"
        width="550px"
        :modal-append-to-body="false"
      >
        <el-button
          class="commonBut saveBtn funComBut addFinancial"
          icon="iconfont icontianjia"
          @click="addFinancialBtn()"
        >
          <span class="opetareText">新增</span>
        </el-button>
        <el-table
          :data="tableListCZ"
          v-loading="loadingCZ"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column
            sortable
            prop="grantDate"
            label="拨款时间"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="amount"
            label="拨款金额(元)"
            align="center"
            :formatter="dateFormaCZ"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            :formatter="formatTd"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            min-width="50"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="reviseFinancialBtn(scope.row)"
                >修改</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <PaginationCZ
          ref="paginationCZ"
          @getList="getTableListCZ"
          :requestUrl="requestUrlCZ"
          :projectId="projectIdCZ"
        ></PaginationCZ>
      </el-dialog>
      <!-- 添加拨款记录弹框 -->
      <el-dialog
        title="添加拨款记录"
        :visible.sync="addFinancialVisible"
        :close-on-click-modal="false"
        @close="cancelFinancialRecord()"
        custom-class="brand-dialog-min-width"
        width="550px"
        :modal-append-to-body="false"
      >
        <el-form
          :model="addFinancialForm"
          :rules="formRules"
          ref="addFinancialForm"
        >
          <el-form-item label="拨款时间" prop="grantDate" label-width="126px">
            <el-date-picker
              style="width: 310px"
              v-model="addFinancialForm.grantDate"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptionsCz"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="拨款金额" prop="amount" label-width="126px">
            <el-input-number
              style="width: 310px; text-align: left"
              :precision="2"
              placeholder="请输入金额"
              v-model="addFinancialForm.amount"
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="备注" label-width="126px" prop="remark">
            <el-input
              style="width: 310px"
              type="textarea"
              :rows="4"
              maxlength="100"
              resize="none"
              show-word-limit
              placeholder="请输入内容"
              v-model="addFinancialForm.remark"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancelFinancialRecord()" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveAddFinancial"
            class="save"
            :loading="canLoginsave"
            >保存</el-button
          >
        </div>
      </el-dialog>
      <!-- 修改拨款记录 -->
      <el-dialog
        title="修改拨款记录"
        :visible.sync="reviseFinancialVisible"
        :close-on-click-modal="false"
        custom-class="brand-dialog-min-width"
        @close="cancelReviseFinancialRecord()"
        width="550px"
        :modal-append-to-body="false"
      >
        <el-form
          :model="reviseFinancialForm"
          :rules="formRules"
          ref="reviseFinancialForm"
        >
          <el-form-item label="拨款时间" prop="grantDate" label-width="126px">
            <el-date-picker
              style="width: 310px"
              v-model="reviseFinancialForm.grantDate"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptionsCz"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="拨款金额" prop="amount" label-width="126px">
            <el-input-number
              style="width: 310px"
              :precision="2"
              placeholder="请输入金额"
              v-model="reviseFinancialForm.amount"
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="备注" label-width="126px">
            <el-input
              style="width: 310px"
              type="textarea"
              :rows="4"
              maxlength="100"
              show-word-limit
              resize="none"
              placeholder="请输入内容"
              v-model="reviseFinancialForm.remark"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click.native="cancelReviseFinancialRecord()"
            class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveReviseFinancial"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import PaginationCZ from '@/components/publicCom/paginationCZ'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'projectListCZ',
  mixins: [scrollTable],
  components: {
    PaginationCZ,
  },
  data() {
    var checkAmount = (rule, value, callback) => {
      setTimeout(function () {
        if (!value && value != 0) {
          return callback(new Error('拨款金额不能为空'))
        } else if (value <= 0) {
          return callback(new Error('拨款金额必须为正数'))
        } else {
          callback()
        }
      }, 100)
    }
    return {
      accountFormVisible: false, //是否显示财政拨款弹框
      addFinancialVisible: false, //是否显示新增财政拨款记录弹框
      reviseFinancialVisible: false, //是否显示修改财政拨款记录弹框
      textarea: '',
      pickerOptionsCz: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      // 补充专户信息
      addFinancialForm: {
        projectId: '',
        grantDate: null,
        amount: undefined,
        remark: '',
      },
      reviseFinancialForm: {
        id: '',
        projectId: '',
        grantDate: null,
        amount: undefined,
        remark: '',
      },
      bankOptions: [],
      projectIdCZ: '',
      canLogin: false, //修改拨款记录按钮loading
      canLoginsave: false, //添加拨款记录按钮loading
      formRules: {
        grantDate: [
          {
            required: true,
            message: '拨款时间不能为空',
            trigger: 'change',
          },
        ],
        amount: [
          {
            required: true,
            validator: checkAmount,
            trigger: 'blur',
          },
        ],
      },
      titleText: '财政拨款',
      //财政-财政拨款-列表表格数据
      tableList: [],
      //财政-财政拨款-财政拨款表格数据
      tableListCZ: [],
      requestUrl: 'api-p/project/expand/findGrantProject',
      requestUrlCZ: 'api-p/projectgrantdetail/base/grantDetaillist',
      areaId: '', //区域
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
        status: '', //开工状态
        industryId: '', //行业
        investment: 'GOV', //投资类型
        serverArea: '', // 服务部署区域
      },
      //搜索条件
      filterFieldCZ: {
        projectName: '', //项目名称
        areaId: '', //区域
        status: '', //开工状态
        industryId: '', //行业
        investment: '', //投资类型
      },
      bankData: [],
      isShow: false, //列表加载
      loading: true,
      loadingCZ: true,
      isShowDetail: '',
    }
  },
  watch: {
    accountFormVisible: {
      handler(oldVal, newVal) {
        if (newVal === false) {
          this.$nextTick(function () {
            this.$refs.paginationCZ.getTableListDataCZ()
          })
        }
        if (oldVal === false) {
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getInvestmenttype({})
    this.getStatus({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustry({})
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('mProjectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListcz:detail') > -1
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
  },
  methods: {
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),

    reviseFinancialBtn(row) {
      this.reviseFinancialForm.projectId = row.projectId
      this.reviseFinancialForm.id = row.id
      this.reviseFinancialForm.grantDate = row.grantDate
      this.reviseFinancialForm.amount = row.amount
      this.reviseFinancialForm.remark = row.remark
      this.reviseFinancialVisible = true
    },
    cancelFinancialRecord() {
      this.addFinancialVisible = false
    },
    //修改财政拨款记录弹框关闭
    cancelReviseFinancialRecord() {
      this.reviseFinancialVisible = false
    },
    // 添加拨款记录弹框的取消
    cancelAddFinancial() {
      this.addFinancialVisible = false
    },
    //保存添加拨款记录
    saveAddFinancial() {
      const vm = this
      vm.canLoginsave = true
      var token = localStorage.getItem('access_token')
      vm.$refs.addFinancialForm.validate((valid) => {
        if (valid) {
          vm.axios({
            method: 'post',
            url: 'api-p/projectgrantdetail/base/add',
            headers: { Authorization: 'Bearer ' + token },
            data: vm.addFinancialForm,
          })
            .then((response) => {
              vm.canLoginsave = false
              vm.$message({
                message: '添加成功',
                type: 'success',
              })
              vm.$refs.paginationCZ.getTableListDataCZ()
            })
            .catch((error) => {
              vm.canLoginsave = false
              vm.$message({
                showClose: true,
                duration: 3000,
                message: '添加拨款记录失败',
                type: 'error',
              })
            })
          vm.addFinancialVisible = false
        } else {
          vm.canLoginsave = false
          return false
        }
      })
    },
    //保存修改拨款记录
    saveReviseFinancial() {
      const vm = this
      vm.canLogin = true
      vm.$refs.reviseFinancialForm.validate((valid) => {
        if (valid) {
          vm.axios({
            method: 'post',
            url: 'api-p/projectgrantdetail/base/update',
            data: vm.reviseFinancialForm,
          })
            .then((response) => {
              vm.canLogin = false
              vm.$message({
                message: '修改成功',
                type: 'success',
              })
              vm.$refs.paginationCZ.getTableListDataCZ()
            })
            .catch((error) => {
              vm.canLogin = false
              vm.$message({
                showClose: true,
                duration: 3000,
                message: '修改拨款记录失败',
                type: 'error',
              })
            })
          vm.reviseFinancialVisible = false
        } else {
          vm.canLogin = false
          return false
        }
      })
    },
    //取消修改拨款记录
    cancelReviseFinancial() {
      this.reviseFinancialVisible = false
    },
    cancelAccountDialog() {
      this.$refs['reviseFinancialForm'].resetFields()
    },
    // 添加财政拨款记录
    addFinancialBtn() {
      const vm = this
      vm.addFinancialVisible = true
      vm.$nextTick(function () {
        vm.$refs['addFinancialForm'].resetFields()
      })
    },
    // 关闭添加财政拨款记录弹框
    cancelAddFinancialDialog() {
      this.$refs['addFinancialForm'].resetFields()
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    //获取财政-财政拨款-列表表格数据
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    //获取财政-财政拨款-财政拨款表格数据
    getTableListCZ(data) {
      this.tableListCZ = data
      this.loadingCZ = false
      if (this.tableListCZ.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //财政拨款弹框
    toFinancialBtn(row) {
      this.projectIdCZ = row.id
      this.addFinancialForm.projectId = row.id
      this.accountFormVisible = true
    },
    dateFormaCZ(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == 0) {
        return this.toFixed(daterc, 2)
      } else {
        return '--'
      }
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == 0) {
        let lately2 = daterc / 10000
        return this.toFixed(lately2, 2)
      } else {
        return '--'
      }
    },
  },
}
</script>

<style scoped lang="less">
.financialVisible {
  /deep/ .el-dialog__body {
    padding-top: 12px;
    padding-bottom: 2px;
  }
  .addFinancial {
    margin-bottom: 12px;
    float: right;
  }
  /deep/ .el-dialog.brand-dialog-min-width {
    padding-bottom: 30px;
  }
}

/deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.container {
  flex-grow: 1;
  .mainCon {
    top: 198px;
    flex-grow: 1;
    flex-shrink: 1;
  }
}
</style>
